<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form
        :inline="true"
        :model="deptForm"
        class="demo-form-inline"
        style="display: flex"
      >
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="deptForm.deptName" placeholder="请输入用户名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="reast">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="deptAdd">新增</el-button>
      </div>

      <el-table
        :tree-props="{ children: 'children' }"
        row-key="_id"
        ref="multipleTableRef"
        :data="deptList"
        style="width: 100%"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column lable="操作" min-width="160">
          <template #default="scope">
            <el-button type="primary" @click="deptEdit(scope.row)"
              >编辑</el-button
            >
            <el-button type="success" @click="deptDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="showMadol" title="创建部门">
      <el-form :model="deptForm" ref="dialogForm" :rules="rules">
        <el-form-item label="上级部门" prop="parentId">
          <el-cascader
            v-model="deptForm.parentId"
            :options="deptList"
            :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
            clearable
          />
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="deptForm.deptName"
        /></el-form-item>
        <el-form-item label="负责人" prop="userName">
          <el-select
            v-model="deptForm.userName"
            placeholder="Select"
            @change="changeSelect"
          >
            <el-option
              v-for="item in deptList"
              :key="item._id"
              :label="item.userName"
              :value="item.userName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="userEmail" style="width: 100%">
          <el-input v-model="deptForm.userEmail" :disabled="true" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import api from './../api'
import { ref, reactive, toRaw, nextTick } from 'vue'
import utils from '../utils/utils.js'

// 请求所用用户列表

const getDepAllList = async () => {
  let res = await api.getDepAllList()
  console.log(res);
}
getDepAllList()



// 定义项目人和邮箱绑定
const changeSelect = () => {
  //   console.log(data);
  console.log("deptList", deptList);
  const car = deptList.value.find(ele => ele.userName === deptForm.userName)
  console.log(car);
  deptForm.userEmail = car.userEmail
}



// 定义表单的正则规则
const rules = reactive({
  //   parentId: [
  //     {
  //       required: true,
  //       message: "上级部门",
  //       trigger: "blur",
  //     },
  //     {
  //       min: 2,
  //       max: 10,
  //       message: "长度在2-8个字符",
  //       trigger: "blur",
  //     },
  //   ],
  deptName: [
    {
      required: true,
      message: "部门名称",
      trigger: "blur",
    },
    {
      min: 2,
      max: 10,
      message: "长度在2-8个字符",
      trigger: "blur",
    },
  ],
  userName: [
    {
      required: true,
      message: "负责人",
      trigger: "blur",
    },
    {
      min: 2,
      max: 10,
      message: "长度在2-8个字符",
      trigger: "blur",
    },
  ],
})

// 获取表单节点
const dialogForm = ref(null)

// 定义菜单form对象
const deptForm = reactive({})

// 定义菜单列表
const deptList = ref([])
// 获取部门列表
const getDeptList = async () => {
  let data = {
    deptName: deptForm.deptName
  }
  let res = await api.getDeptList(data)
  console.log(res);
  deptList.value = res
}
getDeptList()

//定义动态列表
const columns = reactive([
  {
    label: "部门名称",
    prop: "deptName",
  },
  {
    label: "负责人",
    prop: "userName",
  },
  {
    label: "更新时间",
    prop: "updateTime",
  },

  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);

// 定义用户行为
const action = ref('create')
// 定义弹窗行为
const showMadol = ref(false)


//定义弹窗方法
const deptAdd = () => {
  action.value = 'create'
  showMadol.value = !showMadol.value
}

// 表单重置方法
const resetForm = () => {
  dialogForm.value.resetFields()
}

// 定义取消按钮
const handleCancel = () => {
  resetForm()
  showMadol.value = !showMadol.value
}

//定义提交按钮
const handleSubmit = () => {
  dialogForm.value.validate(async (vaild) => {
    console.log(vaild);
    if (vaild) {
      let data = toRaw(deptForm)
      console.log(data);
      data.action = action.value
      let res = await api.getDepoperate(data)
      console.log(res);
      resetForm()
      showMadol.value = !showMadol.value
      getDeptList()
    }
  })
}
// 定义删除按钮
const deptDel = async (row) => {
  action.value = "delete"
  let data = { _id: row._id, action: action.value }
  console.log(data);
  let res = await api.getDepoperate(data)
  ElMessage({
    message: '删除成功',
    type: 'success',
  })
  getDeptList()
}

// 定义查询按钮
const onSubmit = () => {
  console.log(deptForm);
  getDeptList()
}
// 定义重置按钮
const reast = () => {
  deptForm.deptName = ''
  getDeptList()

}
// 定义编辑按钮
const deptEdit = (row) => {
  action.value = 'edit'
  showMadol.value = !showMadol.value
  nextTick(() => {
    Object.assign(deptForm, row)
  })
  //   resetForm()
  //   ElMessage({
  //     message: '修改成功',
  //     type: 'success',
  //   })
  //   getDeptList()
}
</script>

<style lang="scss" scoped>
</style>